<template>
  <div class="">
    <van-nav-bar title="工单详情" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model="active" @click="Friends(active)">
      <van-tab :title="item.name" v-for="(item,index ) in gdbosslist" :key="index" style="">
        <div class=""
          :style="`margin-bottom: 59px;margin-top: 10px;width: 100%;height:${height-105.47}px; overflow-y:scroll;`">
          <div class="" v-if="active==0">
            <div class="" v-for="(item,index) in bizWorkOrderLogsList" :key="index" style="margin-top: 10px 15px 0px;">
              <div class="bg-f" style="margin: 15px 15px 0px;padding: 15px;">
                <div class="flex" style="margin-bottom: 12px;">
                  <div class="" style="width: 6px;height: 6px;margin-right: 16px; border-radius: 50%;"
                    :style="{background:item.color}">
                  </div>
                  <div class="" style="font-size: 16px;font-family: auto;font-weight: bold "
                    :style="{color:item.color}">
                    {{item.logDescript}}
                  </div>
                </div>
                <div class="flex-space" style="margin:0px 0px 15px 22px;">
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: 500;color: #000000;">
                    修改内容
                  </div>
                  <div class="" style="font-size: 12px;font-family: auto;font-weight: 500; "
                    :style="{color:item.color}">
                    {{item.createTime}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- logState工单状态0未提交1已提交2已受理3正在处理4处理完成 5已忽略 6工单完结 -->
          <!-- <div class="" v-if="active==0">
						<div class="" v-for="(item,index) in bizWorkOrderLogsList" :key="index"
							style="margin-top: 10px 15px 0px;">
							<div class="bg-f" style="margin: 15px 15px 0px;padding: 15px;">
								<div class="flex" style="margin-bottom: 12px;">
									<div class=""
										style="width: 6px;height: 6px;margin-right: 16px;background: #0580FF;border-radius: 50%;">
									</div>
									<div class=""
										style="font-size: 16px;font-family: auto;font-weight: bold;color: #0580FF">
										{{item.logDescript}}
									</div>
								</div>
								<div class="flex-space" style="margin:0px 0px 15px 22px;">
									<div class=""
										style="font-size: 14px;font-family:auto;font-weight: 500;color: #000000;">
										修改内容
									</div>
									<div class=""
										style="font-size: 12px;font-family: auto;font-weight: 500;color: #BBBBBB;">
										{{item.createTime}}
									</div>
								</div>

							</div>
						</div>
					</div> -->
          <div class="" v-if="active==1">
            <div class="">
              <van-cell-group>
                <van-cell title="工单标题:" :value="details.workTitle" />
              </van-cell-group>
              <van-cell-group>
                <van-cell title="工单单号:" :value="details.workNo" />
              </van-cell-group>
              <van-cell-group>
                <van-cell title="所属设备:" :value="details.terminalId" />
              </van-cell-group>
              <van-cell-group>
                <van-cell title="工单类型:" :value="details.workTitle" />
              </van-cell-group>
              <van-cell-group>
                <van-cell title="故障日期:" :value="details.workBeginTime" />
              </van-cell-group>
              <van-cell-group>
                <van-cell title="故障明细:" :label="workDescript.ErrorTip" />
              </van-cell-group>
            </div>
          </div>
          <div class="" v-if="active==2">
            <div class="" v-for="(item1,index1) in bizWorkOrderUsesList" :key="index1" style="margin-top: 10px;">
              <!-- <van-cell-group>
                <van-cell title="场地:" :value="item1.useDescript" />
              </van-cell-group>
              <van-cell-group>
                <van-cell title="管理人:" :value="item1.userName" />
              </van-cell-group> -->

              <van-cell>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <van-row>
                    <van-col span="8" class="">场地:</van-col>
                    <van-col span="8" class="custom-title"> {{item1.useDescript}}</van-col>
                  </van-row>
                </template>
              </van-cell>
              <van-cell>
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <van-row>
                    <van-col span="8" class="">管理人:</van-col>
                    <van-col span="8" class="custom-title"> {{item1.userName}}</van-col>
                  </van-row>
                </template>
              </van-cell>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
  import {
    GetRow
  } from '@/api/setting/GetRow.js'
  export default {
    data() {
      return {
        active: 0,
        loading: false,
        height: 100, //默认高度
        workId: '',
        gdbosslist: [{
          name: '工单日志'
        }, {
          name: '工单详情'
        }, {
          name: '关联人'
        }, ],
        bizWorkOrderLogsList: [], //工单日志
        details: {}, //工单详情
        workDescript: {}, //故障明细
        bizWorkOrderUsesList: [], //关联人
      }
    },
    created() {
      this.workId = this.$route.query.workId;
      console.log(this.workId, 'this.workId')
      this.GetRowdeta();
    },
    mounted() {
      this.client() //获取高度

    },
    methods: {
      Friends(index) {
        console.log(index, 'active')
      },
      GetRowdeta() {
        GetRow({
          "workId": this.workId
        }).then(res => {
          this.bizWorkOrderLogsList = res.data.bizWorkOrderLogsList;
          this.bizWorkOrderLogsList.forEach((item, index) => {
            if (item.logState) {

            }
          })
          this.details = res.data; //工单详情
          this.workDescript = JSON.parse(res.data.workDescript);
          this.bizWorkOrderUsesList = res.data.bizWorkOrderUsesList;
          console.log(res, '详情')
        })
      },
      onClickLeft() {
        // this.$router.go(-1)
        this.$router.push({
          path: '/setting',
          query: {
            setting: true,
          }
        })
      },

      client() {
        this.$nextTick(() => {
          this.height = document.body.clientHeight;
        });
      },
    }
  }
</script>

<style>
  /*  .van-cell__value span {
    font-size: 14px !important;
    font-family: auto !important;
    font-weight: bold !important;
    color: #000000 !important;
  } */

  .custom-title {
    font-size: 14px !important;
    font-family: auto !important;
    font-weight: bold !important;
    color: #000000 !important;
  }

  .bg-f {
    border-radius: 5px;
    background-color: #FFFFFF;
  }

  .van-tabs__line {
    background-color: #0580FF !important;
  }

  ..van-tab__text--ellipsis {
    font-size: 13px !important;
    font-family: auto !important;
    font-weight: bold !important;
    color: #000000 !important;
  }
</style>
